import { resolveComponent } from 'vue'
import { fliterDataWrapper } from 'common/js/table'
import { townList } from 'common/js/modules'
import { timeFilter } from 'common/js/utils'

const townArr = townList()
export const columns = (that) => {

  return [
    {
      key: 'stcd',
      align: 'center',
      width: 100,
      title: '水库编码',
      fixed: 'left',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'stcd')
      }
    },
    {
      key: 'stnm',
      align: 'center',
      width: 110,
      title: '水库名称',
      fixed: 'left',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'stnm')
      }
    },
    {
      key: 'area',
      title: '所属区域',
      width: 90,
      align: 'center',
      fixed: 'left',
      render: (h, params) => {
        const { row } = params

        const zhenName = townArr.find(item => item.value === row.zhencode) || {}

        return h('div', {}, [
          h('div', { }, row['addvcdName']),
          h('div', { }, zhenName.label)
        ])
      }
    },
    // {
    //   key: 'area',
    //   title: '所属区域编码',
    //   align: 'center',
    //   render: (h, params) => {
    //     const { row } = params

    //     return h('div', {}, [
    //       h('div', { }, row['addvcd']),
    //       h('div', { }, row['zhenCode'])
    //     ])
    //   }
    // },
    {
      key: 'rz',
      title: '水位',
      width: 80,
      align: 'center',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'rz')
      }
    },
    {
      key: 'rsvrTm',
      align: 'center',
      width: 105,
      title: '水位时间',
      render: (h, params) => {
        const { row } = params
        
        if (row.rsvrTm) {
          return h('div', {}, [
            h('div', {}, timeFilter(new Date(row.rsvrTm), 'yyyy-MM-dd')),
            h('div', {}, timeFilter(new Date(row.rsvrTm), 'HH:mm:ss')),
          ])
        } else {
          return h('div', {}, '--')
        }
      }
    },
    {
      key: 'status',
      align: 'center',
      width: 100,
      title: '水位状态',
      render: (h, params) => {
        const { row } = params
        const status = row.status
        let color = '#19be6b' // 默认绿色

        // 根据状态设置不同颜色
        if (status === '水位延迟') {
          color = '#ff9900'
        } else if (status === '水位离线') {
          color = 'gray'
        } else if (status === '水位缺失') {
          color = '#ed4014'
        }

        return h('span', { style: { color } }, status || '--')
      }
    },
    {
      key: 'drp',
      title: '雨量',
      width: 80,
      align: 'center',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'drp')
      }
    },
    {
      key: 'pptnTm',
      align: 'center',
      width: 105,
      title: '雨量时间',
      render: (h, params) => {
        const { row } = params
        
        if (row.rsvrTm) {
          return h('div', {}, [
            h('div', {}, timeFilter(new Date(row.pptnTm), 'yyyy-MM-dd')),
            h('div', {}, timeFilter(new Date(row.pptnTm), 'HH:mm:ss')),
          ])
        } else {
          return h('div', {}, '--')
        }
      }
    },
    {
      key: '__custom_yuStatus',
      align: 'center',
      width: 100,
      title: '雨量状态',
      render: (h, params) => {
        const { row } = params
        const status = row.__custom_yuStatus
        let color = '#19be6b' // 默认绿色

        // 根据状态设置不同颜色
        if (status === '雨量延迟') {
          color = '#ff9900'
        } else if (status === '雨量离线') {
          color = 'gray'
        } else if (status === '雨量缺失') {
          color = '#ed4014'
        }

        return h('span', { style: { color } }, status || '--')
      }
    },
    {
      key: 'picTm',
      align: 'center',
      width: 105,
      title: '图片时间',
      render: (h, params) => {
        const { row } = params
        
        if (row.rsvrTm) {
          return h('div', {}, [
            h('div', {}, timeFilter(new Date(row.picTm), 'yyyy-MM-dd')),
            h('div', {}, timeFilter(new Date(row.picTm), 'HH:mm:ss')),
          ])
        } else {
          return h('div', {}, '--')
        }
      }
    },
    {
      key: '__custom_picStatus',
      align: 'center',
      width: 100,
      title: '图片状态',
      render: (h, params) => {
        const { row } = params
        const status = row.__custom_picStatus
        let color = '#19be6b' // 默认绿色

        // 根据状态设置不同颜色
        if (status === '图片延迟') {
          color = '#ff9900'
        } else if (status === '图片离线') {
          color = 'gray'
        } else if (status === '图片缺失') { 
          color = '#ed4014'
        }

        return h('span', { style: { color } }, status || '--')
      }
    },
    {
      key: 'videoDetail',
      align: 'center',
      title: '视频在线情况',
      width: 300,
      render: (h, params) => {
        const { row } = params
        const videoDetail = row.__custom_videoDetail || []

        const renArr = []

        if (videoDetail) {
          for (let i = 0; i <= videoDetail.length - 1; i++) {
            const item = videoDetail[i]

            renArr.push(
                h('div', {
                  style: {
                    'width': '100%',
                    'display': 'flex',
                    'align-items': 'center',
                    'overflow': 'hidden'
                  }
                }, [
                  h('div', {
                    title: item['DEVICENAME'],
                    style: {
                      'white-space': 'nowrap',
                      'flex': '0 0 250px',
                      'overflow': 'hidden',
                      'text-overflow': 'ellipsis',
                      'word-break': 'break-all',
                      'text-align': 'left'
                    }
                  }, `（${ i + 1 }）${item['DEVICENAME'] || '--'}`),
                  h('div', {
                    style: {
                      'margin-left': '10px',
                      'color':item['STATUS'] === 'ON' ? '#19be6b' : '#ed4014'
                    }
                  }, item['STATUS'] === 'ON' ? '在线' : '离线')
                ]) 
              )
          }
        } else {
          renArr.push(h('span', {}, '--'))
        }
        
        return h('div', {}, renArr)
      }
    },
    {
      key: '__custom_videoDetailStatus',
      align: 'center',
      title: '视频状态',
      width: 80,
      render: (h, params) => {
        const { row } = params
        const statusStr = row.__custom_videoDetailStatus
        let color = '#19be6b'

        if (statusStr === '视频缺失') {
          color = '#ed4014'
        } else if (statusStr === '视频部分在线') {
          color = '#ff9900'
        } else if (statusStr === '视频全部离线') {
          color = 'gray'
        }

        return h('span', { style: { color } }, statusStr)
      }
    },
    {
      key: 'createTime',
      align: 'center',
      title: '统计时间',
      width: 105,
      render: (h, params) => {
        const { row } = params
        
        if (row.createTime) {
          return h('div', {}, [
            h('div', {}, timeFilter(new Date(row.createTime), 'yyyy-MM-dd')),
            h('div', {}, timeFilter(new Date(row.createTime), 'HH:mm:ss')),
          ])
        } else {
          return h('div', {}, '--')
        }
      }
    }
  ]
}
